<template>
    <view class="globe_back">
        <view class="p_32">
            <view class="flex flex_wrap justify_content_between head">
                <view style="width: 20%">
                    <image class="headTx" src="@/static/imgs/jdy.png" mode="widthFix"></image>
                </view>
                <view style="width: 70%">
                    <text>同路仁接单员</text>
                    <br />
                    <u-rate :count="count" v-model="value" activeColor="#FF6401" inactiveColor="#F7F7F7"></u-rate>
                    <text class="score">4</text>
                </view>
                <view style="width: 10%">
                    <image @click="setUp" class="imgIcon" src="@/static/imgs/icon_sz.png"></image>
                </view>
            </view>
            <view class="flex money">
                <view class="flex_1">
                    <text class="moneyNum">25325.26</text>
                    <br />
                    <text class="moneyText">我的佣金（元）</text>
                </view>
                <view class="flex_1">
                    <text class="moneyNum">15896.26</text>
                    <br />
                    <text class="moneyText">可提现（元）</text>
                </view>
                <view class="flex_1">
                    <text class="moneyNum">1698.26</text>
                    <br />
                    <text class="moneyText">已提现（元）</text>
                </view>
            </view>
            <view>
                <view class="flex justify_content_between align_items_center statistics">
                    <view class="flex align_items_center">
                        <text class="log-text"></text>
                        <text class="ml_8 f_32 cl_00091A fw_bold">数据统计</text>
                    </view>
                    <view class="flex align_items_center" @click="dataStatistics">
                        <text class="f_28 cl_999CA3">查看全部</text>
                        <image class="img_32 ml_8" src="https://jiuyuan.smomotbo.com/static/imgs/query-info/next-icon.png" mode=""></image>
                    </view>
                </view>
                <view class="flex flex_wrap back_fff statiData">
                    <view class="dataList">
                        <text class="moneyNum fw_bold">1698.26</text>
                        <br />
                        <text class="moneyText">今日收益（元）</text>
                    </view>
                    <view class="dataList">
                        <text class="moneyNum fw_bold">1698.26</text>
                        <br />
                        <text class="moneyText">今日接单（笔）</text>
                    </view>
                    <view class="dataList">
                        <text class="moneyNum fw_bold">1698.26</text>
                        <br />
                        <text class="moneyText">待入账（元）</text>
                    </view>
                    <view class="dataList">
                        <text class="moneyNum fw_bold">1698.26</text>
                        <br />
                        <text class="moneyText">今日扣款（元）</text>
                    </view>
                    <view class="dataList">
                        <text class="moneyNum fw_bold">1698.26</text>
                        <br />
                        <text class="moneyText">今日扣款订单（笔）</text>
                    </view>
                    <view class="dataList">
                        <text class="moneyNum fw_bold">1698.26</text>
                        <br />
                        <text class="moneyText">待扣款订单（元）</text>
                    </view>
                </view>
            </view>
            <view>
                <view class="flex justify_content_between align_items_center statistics">
                    <view class="flex align_items_center">
                        <text class="log-text"></text>
                        <text class="ml_8 f_32 cl_00091A fw_bold">常用功能</text>
                    </view>
                </view>
                <view @click="wallet" class="p_24 br_24 back_fff flex justify_content_between align_items_center mt_24">
                    <view class="flex align_items_center">
                        <image class="img_64" :src="url + 'icon_qb.png'" mode=""></image>
                        <text class="f_28 cl_333A47 ml_24">我的钱包</text>
                    </view>
                    <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                </view>
                <view @click="evaluate" class="p_24 br_24 back_fff flex justify_content_between align_items_center mt_24">
                    <view class="flex align_items_center">
                        <image class="img_64" :src="url + 'icon_kf.png'" mode=""></image>
                        <text class="f_28 cl_333A47 ml_24">我的评价</text>
                    </view>
                    <image class="img_32" :src="url + 'next-icon.png'" mode=""></image>
                </view>
            </view>
        </view>
        <!-- 底部 -->
        <view style="height: 150px"></view>
        <view class="flex justify_content_center bottonTab">
            <view @click="click1(0)" class="tabitem">
                <image v-if="tabactive == 0" class="tabIcon" src="@/static/imgs/tabBar/jdy_dd1.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/jdy_dd.png" mode=""></image>
                <text :class="tabactive == 0 ? 'active' : ''">订单</text>
            </view>
            <view @click="click1(1)" class="tabitem">
                <image v-if="tabactive == 1" class="tabIcon" src="@/static/imgs/tabBar/jdy_my1.png" mode=""></image>
                <image v-else class="tabIcon" src="@/static/imgs/tabBar/jdy_my.png" mode=""></image>
                <text :class="tabactive == 1 ? 'active' : ''">我的</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            url: '',
            count: 5,
            value: 4,
            value1: 1
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    methods: {
        click1(e) {
            console.log('click1', e);
            if (e == 0) {
                uni.navigateTo({
                    url: '/pages/OrderReceiverTerminal/TrailerOrder/TrailerOrder'
                });
            }
            if (e == 1) {
                uni.navigateTo({
                    url: '/pages/OrderReceiverTerminal/me'
                });
            }
        },
        setUp() {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/me/setUp'
            });
        },
        evaluate() {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/me/evaluate'
            });
        },
        wallet() {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/me/wallet'
            });
        },
        dataStatistics() {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/me/dataStatistics'
            });
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.u-rate {
    display: inline-block !important;
}
.active {
    color: #3377ff;
}
.bottonTab {
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
}
.tabitem {
    width: 50%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    font-size: 28rpx;
    color: #ccced1;
}
.tabIcon {
    width: 40rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
}
.log-text {
    width: 4rpx;
    height: 32rpx;
    background-color: #3377ff;
}
.imgIcon {
    width: 40rpx;
    height: 40rpx;
}
.money {
    text-align: center;
    margin-top: 40rpx;
}
.moneyNum {
    font-size: 32rpx;
    color: #00091a;
}
.moneyText {
    font-size: 24rpx;
    color: #999ca3;
}
.head {
    margin-top: 200rpx;
}
.score {
    color: #ff6401;
    font-size: 24rpx;
    margin-left: 16rpx;
}
.headTx {
    border-radius: 16px;
    width: 96rpx;
    height: 96rpx;
}
.statistics {
    margin-top: 40rpx;
}
.statiData {
    border-radius: 24rpx;
    margin-top: 32rpx;
    padding: 8rpx 0 32rpx 0;
    .dataList {
        width: 33%;
        text-align: center;
        padding-top: 24rpx;
    }
}
</style>
